<template>
  <div class="login-container">
    <div class="login-form">
      <van-form>
        <h4>HUA-WMS</h4>
        <van-field
          v-model="username"
          name="用户名"
          clearable
          placeholder="请输入用户名"
        >
          <template slot="left-icon">
            <icon-svg icon-class="zhanghao" />
          </template>
        </van-field>
        <van-field
          v-model="password"
          clearable
          name="密码"
          placeholder="请输入密码"
          type="password"
        >
          <template slot="left-icon">
            <icon-svg icon-class="mima" />
          </template>
        </van-field>
        <div class="jizhu">
          <van-checkbox v-model="checkbox" shape="square" @click="check" />
          <span class="psw">记住密码</span>
        </div>

        <div class="mt-1">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="Submit"
            >登 录</van-button
          >
        </div>
        <van-row class="mt-1">
          <van-col span="6" offset="18">
            <span class="text-button__primary" @click="ipSettingVisible = true"
              >ip设置</span
            >
          </van-col>
        </van-row>
      </van-form>
    </div>
    <div class="version">版本号：{{ version }}</div>

    <van-dialog
      v-model="ipSettingVisible"
      :title="'当前IP ' + this.$store.getters.ip"
      show-cancel-button
      @confirm="confirm"
      @cancel="cancel"
    >
      <van-field
        label-width="3rem"
        v-model="ip"
        label="http://"
        placeholder="请输入IP地址"
        clearable
    /></van-dialog>
  </div>
</template>

<script>
import { VERSION } from "../config";
import cookie from "cookie_js";
import { login } from "../assets/api/post";
import { toast } from "../untils/commion";

export default {
  name: "Login",
  data() {
    return {
      ip: "",
      username: "",
      password: "",
      version: "",
      ipSettingVisible: false,
      checkbox: false,
      submit: {},
    };
  },
  mounted() {
    localStorage.setItem("printMsg", "未连接");
    this.version = VERSION;
    let ifChecked = JSON.parse(localStorage.getItem("checked"));
    if (ifChecked == true) {
      this.checkbox = true;
      this.username = JSON.parse(localStorage.getItem("user"));
      this.password = JSON.parse(localStorage.getItem("psw"));
    }
  },
  methods: {
    async Submit() {
      let res = await login(this.username, this.password);
      // console.log(res);
      if (res.status == 200) {
        if (res.status == 200) {
          this.$store.state.username = this.username;
          this.$store.state.userid = res.data.userinfo.F_Id;
          // 存入缓存
          localStorage.setItem("user", JSON.stringify(this.username));
          localStorage.setItem("psw", JSON.stringify(this.password));
          localStorage.setItem("username", JSON.stringify(this.username));
          localStorage.setItem(
            "userid",
            JSON.stringify(res.data.userinfo.F_Id)
          );
          cookie.set("username", this.username);
          this.$router.replace("/home");
        } else {
          toast(res.data.msg);
        }
      } else {
        toast(res.msg);
      }
    },
    check() {
      // this.checkbox = !this.checkbox;
      if (this.checkbox == true) {
        if (this.username && this.password) {
          localStorage.setItem("checked", JSON.stringify(this.checkbox));
        } else {
          this.$toast("用户名和密码不能为空");
          this.checkbox = false;
        }
      } else {
        localStorage.removeItem("checked");
        localStorage.removeItem("user");
        localStorage.removeItem("psw");
      }
    },
    confirm() {
      if (this.ip != "") {
        this.$store.commit("SET_IP", this.ip);
      }
      this.ip = "";
    },
    cancel() {
      this.ip = "";
    },
  },
};
</script>

<style lang="less" scoped>
@import "../assets/less/comm";
@import "../assets/less/button";
.login-container {
  height: 30rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  .login-form {
    width: 80%;
  }
  .version {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    font-size: 0.8rem;
    color: rgb(252, 40, 40);
    right: 0.5rem;
    // color: @second-font-color;
  }
}
.van-field {
  margin: 1.5rem auto;
  border-radius: 0.5rem;
  box-shadow: 0 0 0.25rem grey;
}
.van-button {
  position: relative;
  top: 0.5rem;
  box-shadow: 0 0 0.4rem black;
}
h4 {
  font-size: 2rem;
  text-align: center;
  color: rgb(24, 173, 223);
}
.jizhu {
  display: flex;
  color: grey;
}
.psw {
  margin-left: 0.25rem;
}
.text-button__primary {
  margin-top: 2rem;
}
</style>
